<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>SoundManager 2: JavaScript Sound For The Web</title>
<meta name="robots" content="noindex" />
<meta name="description" content="Play sound from JavaScript including MP3, MPEG-4 and HTML5-supported audio formats with SoundManager 2, a cross-browser/platform sound API. BSD licensed." />
<meta name="keywords" content="javascript sound, html5 audio, html5 sound, javascript audio, javascript play mp3, javascript sound control, mp3, mp4, mpeg4, aac, Scott Schiller, Schill, Schillmania" />
<meta name="author" content="Scott Schiller" />
<meta name="copyright" content="Copyright (C) 1997 onwards Scott Schiller" />
<meta name="language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- base library + a bunch of demo components (yay, they all work together) -->
<link rel="stylesheet" type="text/css" href="demo/play-mp3-links/css/inlineplayer.css" />
<link rel="stylesheet" type="text/css" href="demo/page-player/css/page-player.css" />
<link rel="stylesheet" type="text/css" href="demo/360-player/360player.css" />
<link rel="stylesheet" type="text/css" href="demo/mp3-player-button/css/mp3-player-button.css" />
<link rel="stylesheet" type="text/css" href="demo/flashblock/flashblock.css" />
<link rel="stylesheet" type="text/css" media="screen" href="demo/index.css" />
<script type="text/javascript" src="script/soundmanager2.js"></script>
<script type="text/javascript" src="demo/mp3-player-button/script/mp3-player-button.js"></script>
<script type="text/javascript" src="demo/page-player/script/page-player.js"></script>
<script type="text/javascript" src="demo/play-mp3-links/script/inlineplayer.js"></script>
<!-- 360 UI demo, canvas magic for IE -->
<!--[if IE]><script type="text/javascript" src="demo/360-player/script/excanvas.js"></script><![endif]-->
<!-- 360 UI demo, Apache-licensed animation library -->
<script type="text/javascript" src="demo/360-player/script/berniecode-animator.js"></script>
<script type="text/javascript" src="demo/360-player/script/360player.js"></script>

<script type="text/javascript">
// <![CDATA[

	var isHome = true;
	if (!window.location.href.toString().match(/sm2-usehtml5audio/i)) {
      soundManager.useHTML5Audio = true; // w00t.
    }
	soundManager.useFlashBlock = true;
	soundManager.bgColor = '#ffffff';
	soundManager.debugMode = false;
	soundManager.url = 'swf/';
	soundManager.wmode = 'transparent'; // hide initial flash of white on everything except firefox/win32

    var PP_CONFIG = {
      autoStart: false,      // begin playing first sound when page loads
      playNext: true,        // stop after one sound, or play through list until end
      useThrottling: false,  // try to rate-limit potentially-expensive calls (eg. dragging position around)</span>
      usePeakData: true,     // [Flash 9 only] whether or not to show peak data (left/right channel values) - nor noticable on CPU
      useWaveformData: false,// [Flash 9 only] show raw waveform data - WARNING: LIKELY VERY CPU-HEAVY
      useEQData: false,      // [Flash 9 only] show EQ (frequency spectrum) data
      useFavIcon: false,     // try to apply peakData to address bar (Firefox + Opera) - performance note: appears to make Firefox 3 do some temporary, heavy disk access/swapping/garbage collection at first(?) - may be too heavy on CPU
      useMovieStar: true     // Flash 9.0r115+ only: Support for a subset of MPEG4 formats.
    }

	if (navigator.platform.match(/win32/i) && navigator.userAgent.match(/firefox/i)) {
    // extra-special homepage case (you should never see this), prevent out-of-view SWF load failure WITH high performance AND flashblock AND SWF in a placed element
      soundManager.useHighPerformance = false;
    }
	soundManager.useFastPolling = true;

    if (!navigator.userAgent.match(/msie 6/i)) {
	  threeSixtyPlayer.config.imageRoot = 'demo/360-player/';
    }

    function checkBadSafari() {
		var _ua = navigator.userAgent;
		if (!window.location.toString().match(/sm2\-ignorebadua/i) && _ua.match(/safari/i) && !_ua.match(/chrome/i) && _ua.match(/OS X 10_6_(3|4|5)/i)) { // Safari 4 and 5 occasionally fail to load/play HTML5 audio on Snow Leopard due to bug(s) in QuickTime X and/or other underlying frameworks. :/ Known Apple "radar" bug. https://bugs.webkit.org/show_bug.cgi?id=32159
		  var complaint = document.createElement('li');
		  complaint.innerHTML = '<b>Note</b>: HTML5 audio disabled for this browser/OS due to load/play failures in Safari 4 + 5 on Snow Leopard 10.6.3/4, caused by bugs in QuickTime X and/or underlying frameworks. See <a href="https://bugs.webkit.org/show_bug.cgi?id=32159#c9">bugs.webkit.org #32519</a>. (Safari on Leopard + Win32, and iPad OK, however.)<br>Try <a href="?sm2-ignorebadua">HTML5 anyway?</a> ("water drop" MP3 playback seems to fail most often.)';
		  _id('html5-audio-notes').appendChild(complaint);
		}
	}

	soundManager.onready(function() {
	  if (soundManager.supported()) {
		_id('sm2-support').style.display = 'none';
	    doChristmasLights();
	    // if using HTML5, show some additional format support info
	    // written while watching The Big Lebowski for the Nth time. Donny, you're out of your element!
        var s = soundManager;
	    if (s.useHTML5Audio && s.hasHTML5) {
	      var li = document.createElement('li');
	      li.className = 'html5support';
	      var items = [];
	      var needsFlash = false;
          for (item in s.audioFormats) {
            if (s.audioFormats.hasOwnProperty(item)) {
			  needsFlash = (soundManager.filePattern.test('.'+item));
              items.push('<span class="'+(s.html5[item]?'true':'false')+(!s.html5[item] && needsFlash?' partial':'')+'" title="'+(s.html5[item]?'Native HTML5 support found':'No HTML5 support found'+(needsFlash?', using Flash fallback':', no Flash support either'))+'">'+(s.html5[item]?'&lt;':'')+item+(s.html5[item]?'&gt;':'')+'</span>');
            }
          }
          li.innerHTML = 'This browser\'s <em class="true">&lt;HTML5&gt;</em> vs. <em class="partial">Flash</em> support (best guess):<b>'+items.join('')+'</b>'+(!soundManager._use_maybe?' (Try <a href="#sm2-useHTML5Maybe=1" onclick="window.location.href=this.href;window.location.reload()" title="Try using probably|maybe for HTML5 Audio().canPlayType(), more buggy but may get HTML5 support on Chrome/OS X and other browsers.">less-strict HTML5 checking</a>?)':' (allowing <b>maybe</b> for <code>canPlayType()</code>, less-strict HTML5 audio support tests)');
	      _id('html5-audio-notes').appendChild(li);
	      _id('without-html5').style.display = 'inline';
	    } else {
	      _id('without-html5').style.display = 'none';
		}
		checkBadSafari();
	    // check inline player / HTML 5 bits
	    var items = _id('muxtape-html5').getElementsByTagName('a');
	    for (var i=0, j=items.length; i<j; i++) {
	      if (!soundManager.canPlayLink(items[i])) {
		    items[i].className += ' not-supported';
		    items[i].title += ' \n\nNOTE: Format apparently not supported by this browser.';
	      }
		}
	  } else {
        checkBadSafari();
	  }
	});

	soundManager.onerror = function() {
	  // failed to load
	  var o = _id('sm2-support');
	  var smLoadFailWarning = '<div style="margin:0.5em;margin-top:-0.25em"><h3>Oh snap!</h3><p>'+(soundManager.hasHTML5?'The flash portion of ':'')+'SoundManager 2 was unable to start. '+(soundManager.useHTML5Audio?(soundManager.hasHTML5?'</p><p>Partial HTML5 Audio() is present, but flash is needed for MP3 and/or MP4 support.':'<br>(No HTML5 Audio() support found, either.)'):'')+'<br>All links to audio will degrade gracefully.</p><p id="flashblocker">If you have a flash blocker, try allowing the SWF to run - it should be visible above.</p><p id="flash-offline">'+(!soundManager._overHTTP?'<b>Viewing offline</b>? You may need to change a Flash security setting.':'Other possible causes: Missing .SWF, or no Flash?')+' Not to worry, as guided help is provided.</p><p><a href="doc/getstarted/index.html#troubleshooting" class="feature-hot">Troubleshooting</a></p></div>';
	  var hatesFlash = (navigator.userAgent.match(/(ipad|iphone)/i));
	  o.innerHTML = smLoadFailWarning;
	  if (hatesFlash || soundManager.getMoviePercent()) {
	    // movie loaded at least somewhat, so don't show flashblock things
		_id('flashblocker').style.display = 'none';
		if (hatesFlash) {
		  // none of that here.
		  _id('flash-offline').style.display = 'none';
		}
	  }
      o.style.marginBottom = '1.5em';
	  o.style.display = 'block';
	}
	
	// side note: If it's not december but you want to smash things, try #christmas=1 in the homepage URL.

// 	]]>
</script>
<script type="text/javascript" src="demo/index.js"></script>
<script type="text/javascript">
// <![CDATA[
function doChristmasLights() {
  if ((document.domain.match(/schillmania.com/i) && new Date().getMonth() == 11) || window.location.toString().match(/christmas/i)) {
    loadScript('http://yui.yahooapis.com/combo?2.6.0/build/yahoo-dom-event/yahoo-dom-event.js&2.6.0/build/animation/animation-min.js',function(){
  	  loadScript('../demo/christmas-lights/christmaslights-home.js',function(){
	    if (typeof smashInit != 'undefined') {
	      setTimeout(smashInit,20);
	    }
	  });
    });
  }
}
// ]]>
</script>
<style type="text/css">

/* one small hack. */
.ui360 a.sm2_link {
 position:relative;
}

.ui360 {
 /* Firefox 3 doesn't show links otherwise? */
 width:100%;
}

body #sm2-container object,
body #sm2-container embed {
 /* otherwise, firefox on win32 barfs on homepage. */
 left:0px;
 top:0px;
}

</style>
</head>

<body class="home">
	
<div id="content">

 <div id="top">
  <div id="lights"></div>

  <h1>A JavaScript Sound API supporting MP3, MPEG4 and HTML5 Audio.</h1>

	<div id="nav">
         <div id="version"></div>
	 <ul>

	  <li>
	   <strong><a href="#home">Home</a></strong>
	  </li>

	  <li>
	   <a href="#">Demos</a>
	   <ul>
		<li><a href="demo/api/">API Examples</a></li>
	    <li><a href="demo/play-mp3-links/">Playable MP3 links</a></li>
	    <li><a href="demo/mp3-player-button/" class="exclude">Basic MP3 Play Button</a></li>
		<li><a href="demo/page-player/">Muxtape-style UI</a></li>
		<li><a href="demo/360-player/">360&deg; Player UI</a></li>
	    <li><a href="demo/mpc/">Drum Machine (MPC)</a></li>
		<li><a href="demo/animation/">DOM/Animation Demos</a></li>
		<li><a href="demo/flashblock/">FlashBlock Handling</a></li>
		<li><a href="demo/template/">Basic Template</a></li>
	   </ul>
	  </li>

	  <li>
	   <a href="doc/getstarted/">Getting Started</a>
	   <ul>
		<li><a href="doc/getstarted/#how-sm2-works">How SoundManager 2 works</a></li>
		<li><a href="doc/getstarted/#basic-inclusion">Including SM2 on your site</a></li>
		<li><a href="doc/getstarted/#troubleshooting">Troubleshooting</a></li>
	   </ul>
	  </li>

	  <li>
	   <a href="doc/">Documentation</a>
	   <ul>
		<li><a href="doc/#sm-config">SoundManager Properties</a></li>
		<li><a href="doc/#sound-object-properties">Sound Object Properties</a></li>
		<li><a href="doc/#smdefaults">Global Sound Defaults</a></li>
		<li><a href="doc/#api">SoundManager Core API</a></li>
		<li><a href="doc/#smsoundmethods">Sound Object (SMSound) API</a></li>
	   </ul>
	  </li>
	
	  <li>
	   <a href="doc/download/">Download</a>
	   <ul>
		<li><a href="doc/download/#latest">Get SoundManager 2</a></li>
		<li><a href="doc/download/#revision-history">Revision History</a></li>
	   </ul>

	  </li>
	
	  <li>
	   <a href="doc/technotes/">Technical Notes</a>
	   <ul>
		<li><a href="doc/technotes/#requirements">System Requirements</a></li>
		<li><a href="doc/technotes/#debug-output">Debug + Console Output</a></li>
	   </ul>
	  </li>

	  <li>
	   <a href="doc/resources/">Resources</a>
	   <ul>
		<li><a href="doc/resources/#licensing">Licensing</a></li>
		<li><a href="doc/resources/#related">Related Projects</a></li>
		<li><a href="http://getsatisfaction.com/schillmania/products/schillmania_soundmanager_2/">SM2 support / discussion</a></li>
		<li><a href="http://www.schillmania.com/content/react/contact/">Contact Info @ Schillmania.com</a></li>
	   </ul>
	  </li>

	 </ul>
	 <div class="clear"></div>
	</div>
	
 </div>

 <div id="main" class="triple">
	
	<div id="live-demos" class="columnar">

	 <div class="c1">
	  	<h2>What SoundManager 2 does</h2>
		<p>Audio features, accessible from JavaScript.</p>
	 </div>

	 <div class="c2">
		
		<h3>About SoundManager 2, Features and Live Demos</h3>

		<div style="position:relative;padding-top:0.5em;padding-bottom:0.75em">

		<img src="demo/_image/speaker.png" alt="speaker icon" style="float:left;display:inline;width:68px;height:68px;margin:1em 1em 0px 0px" />

		<h2 class="special" style="margin-top:0.33em">SoundManager 2 makes it easier to play audio using JavaScript.</h2>
		
		<p style="margin-top:0.5em">By wrapping and extending HTML5 and Flash Audio APIs, SoundManager 2 brings reliable cross-platform audio to JavaScript. <a href="doc/getstarted/#intro" class="cta" style="white-space:nowrap">How it works <span>&raquo;</span></a></p>

		<div class="clear">&nbsp;</div>
	
		</div>

		<div id="demo-box">
			<div id="sm2-container"><!-- SM2 flash component goes here --></div>
            <div id="sm2-support" class="demo-block"></div>
			<p id="demo-header"><strong style="font-size:1.1em;font-weight:bold;white-space:nowrap">Inline JavaScript Sound API Examples</strong></p>
			<div id="demos">
			<h3 class="wedge" style="border-bottom:none;margin-top:0px">Basic MP3 Buttons<span class="l"></span><span class="r"></span><a href="demo/mp3-player-button/" title="Basic MP3 Play Button demo" class="cta-more">More &raquo;</a></h3>
			<div class="demo-block">
				<p style="margin-bottom:0.25em;margin-left:0.25em">
					Change &nbsp;<a href="demo/_mp3/coins.mp3" title="Play &quot;Change&quot;" class="sm2_button exclude inline-exclude norewrite" style="padding:0px">coins.mp3</a>
					&nbsp;&nbsp;<span style="color:#999">|</span>&nbsp;
					Glass 1&nbsp;&nbsp;<a href="demo/christmas-lights/sound/glass0.mp3" class="sm2_button exclude inline-exclude norewrite" title="Play &quot;Glass break 1&quot;" style="padding:0px">glass0.mp3</a>
					&nbsp;&nbsp;<span style="color:#999">|</span>&nbsp; 2 &nbsp;<a href="demo/christmas-lights/sound/glass1.mp3" class="sm2_button exclude inline-exclude threesixty-exclude norewrite" title="Play &quot;Glass break 2&quot;" style="padding:0px">glass1.mp3</a>
					&nbsp;&nbsp;<span style="color:#999">|</span>&nbsp; 3 &nbsp;<a href="demo/christmas-lights/sound/glass2.mp3" class="sm2_button exclude inline-exclude threesixty-exclude norewrite" title="Play &quot;Glass break 3&quot;" style="padding:0px">glass2.mp3</a>
				</p>
			</div>
			<h3 class="wedge" style="border-bottom:none;margin-top:0px">Playable MP3 links<span class="l"></span><span class="r"></span><a href="demo/play-mp3-links/" title="Playable MP3 links demo" class="cta-more">More &raquo;</a></h3>
			<div class="demo-block">
				<ul class="graphic" style="padding:0.5em 0px 0.25em 0.25em">
				 <li><a href="demo/_mp3/fancy-beer-bottle-pop.mp3" title="Demo audio: Popping a corked beer bottle. Slightly distorted." class="exclude button-exclude norewrite">A corked beer bottle</a></li>
				</ul>
			</div>
			<h3 class="wedge" style="border-bottom:none;margin-top:0px">360&deg; Player UI<span class="l"></span><span class="r"></span><a href="demo/360-player/" title="360&deg; Player UI demo" class="cta-more">More &raquo;</a></h3>
			<div class="demo-block" style="overflow:hidden">
			 <div style="margin-bottom:16px;margin-left:8px;margin-top:-4px">
			  <div class="ui360" style="float:left;display:inline;margin-right:16px"><a href="demo/_mp3/mak.mp3" title="360 demo: Angry Cow Sound" class="norewrite exclude button-exclude inline-exclude">Random</a></div>
			  <div class="ui360" style="position:absolute;left:50%"><a href="http://freshly-ground.com/data/audio/sm2/water-drop.mp3" title="360 Demo: Water Drop" class="exclude button-exclude inline-exclude">Water Drop</a></div>
			  <div class="clear"></div>
			 </div>
			</div>

			<h3 class="wedge" style="border-bottom:none;margin-top:0px">Muxtape-style UI <span class="sidenote">(+HTML5 tests)</span><span class="l"></span><span class="r"></span><a href="demo/page-player/" title="Muxtape-style UI demo (+HTML5 audio tests)" class="cta-more">More &raquo;</a></h3>
			<div class="demo-block">
				<ul class="playlist" style="margin-top:0.5em">
				 <li><a href="http://freshly-ground.com/data/audio/mpc/20060826 - Armstrong.mp3" class="button-exclude inline-exclude threesixty-exclude">Armstrong Beat</a></li>
				 <li><a href="http://freshly-ground.com/data/audio/mpc/20090119 - Untitled Groove.mp3" class="button-exclude inline-exclude threesixty-exclude">Untitled Groove</a></li>
				 <li><a href="http://freshly-ground.com/data/audio/sm2/quail-64kbps-he-aac-from-itunes-renamed-from-mp4.aac" title="48 kbps MPEG4 High-Efficiency AAC test sound: BC Quail" class="button-exclude inline-exclude threesixty-exclude">BC Quail <span class="sidenote">(HE-AAC)</span></a></li>
				</ul>
				<h4 style="margin:0.25em 0px 0px 0px;padding:0.5em 0px 0.5em 0.75em;font-size:0.9em;letter-spacing:0.01em;border:1px solid #eee;border-left:none;border-right:none;font-weight:normal;color:#333;border-top:none">HTML5 Audio()-only tests</h4>
				<ul id="muxtape-html5" class="playlist" style="margin-top:0.5em">
				 <li><a href="http://freshly-ground.com/data/audio/sm2/20060924%20-%20Ghosts%20&%20Goblins%20Reconstructed.ogg" title="OGG sound format, requires HTML5 Audio() support to play" class="button-exclude inline-exclude threesixty-exclude" style="font-size:0.8em">Ghosts+Goblins Reconstructed <span class="sidenote">(OGG)</span></a></li>
				 <li><a href="http://freshly-ground.com/data/audio/sm2/bottle-pop.wav" title="WAV sound format, requires HTML5 Audio() support to play" class="button-exclude inline-exclude threesixty-exclude" style="font-size:0.8em">A corked beer bottle <span class="sidenote">(WAV)</span></a></li>
				</ul>
				<p class="note" style="margin-top:3px;margin-bottom:0px;margin-left:0.8em">More: <a href="demo/api/" title="SoundManager 2 API examples">API</a> | <a href="demo/mpc/" title="SoundManager 2 MPC/Drum Machine demo">Drum Machine</a> | <a href="demo/animation/" title="SoundManager 2 DOM / Animation demos" class="exclude">Animation</a></p>

			</div>

			<div class="clear">&nbsp;</div>

			<div style="position:relative;clear:both;margin-top:1em;text-align:right">
			  <span id="without-html5" style="display:none"><a href="#sm2-usehtml5audio=0" onclick="document.location.href=this.href;document.location.reload()" title="View this page without HTML5 Audio support">-html5</a>&nbsp;&nbsp;|&nbsp;</span>
			  <a href="#debug=1" id="with-debug" title="View this page with debug output mode enabled (console.log() or HTML-based)" onclick="document.location.href=this.href;document.location.reload()">+debug</a>
			  <script type="text/javascript">if (document.location.href.match(/debug=1/i)) document.getElementById('with-debug').style.display = 'none';</script>
			</div>

		    </div>
			
		</div>
		
			<h4 style="clear:left;margin-top:0.5em">HTML5 Audio Support <span style="color:#888">(Beta-ish)</span></h4>
			<ul id="html5-audio-notes" class="standard">
			 <li>100% Flash-free MP3 + MP4/AAC where supported. Works on iPad, iPhone iOS 4</li>
			 <li>Fallback to Flash for MP3/MP4 support, as needed</li>
			 <li>SM2 API is unchanged, transparent; HTML5/Flash switching handled internally</li>
             <li>HTML5 API support approximates Flash 8 API features, minus ID3, plus buffering</li>
			 <li>Some other formats (WAV/OGG) supported via HTML5, depending on browser</li>
			 <li>See <a href="doc/#soundmanager-usehtml5audio" title="soundManager.useHTML5Audio HTML5 Audio() support feature documentation">soundManager<wbr>.useHTML5Audio</a> for implementation details</li>
			</ul>
		
			<h4>Basic API Features (Flash 8)</h4>
			<ul class="standard">
			 <li>Load, stop, play, pause, mute, seek, pan, volume control from JavaScript</li>
			 <li>Events: onload(), whileloading(), whileplaying(), onfinish() and more</li>
			 <li>ID3V1 and ID3V2 tag support for MP3s (title, artist, genre etc.)</li>
			</ul>

			<h4>Shiny Flash 9-only Features</h4>

			<div style="float:right;display:inline;margin:0px;text-align:center;font-size:x-small;white-space:nowrap">
			 <a href="demo/360-player/canvas-visualization.html" title="JavaScript + Canvas MP3 visualization demo" style="border:none;margin:0px;padding:0px"><img id="demo-360" src="demo/_image/360ui-screenshot3.png" alt="" style="margin:0px;padding:0px;border:none" /></a>
			 <div><a href="demo/360-player/canvas-visualization.html" title="JavaScript + Canvas MP3 visualization demo">360&deg; UI + waveform/spectrum</a></div>
			 <div class="note" style="margin-top:0px">Beta-ish, somewhat experimental demo</div>
			 <script type="text/javascript">document.getElementById('demo-360').src='demo/_image/360ui-screenshot'+(1+parseInt(Math.random()*4))+'.png';</script>
			</div>

			<ul class="standard">
			 <li>RTMP / Flash Media Server streaming support (experimental) - see <a href="doc/#smsound-serverurl" title="SMSound.serverURL parameter">serverURL</a> for details</li>
			 <li>MPEG-4 (AAC, HE-AAC, H.264) audio support</li>
			 <li>"MultiShot" play (layered/chorusing effects)</li>
			 <li>Waveform/frequency spectrum data</li>
			 <li>Peak (L/R channel volume) data</li>
			 <li>Audio buffering state/event handling</li>
			</ul>
			
			<h4>General Tech Stuff</h4>
			<ul class="standard">
			 <li>Full <a href="doc/" title="SoundManager 2 documentation">API Documentation</a> with examples and notes</li>
			 <li>console.log()-style <a href="doc/technotes/#debug-output" title="SoundManager 2 debug output">debug output</a> and <a href="doc/getstarted/#troubleshooting" title="SoundManager 2 troubleshooting tool">troubleshooting tools</a></li>
			 <li>Community-based <a href="http://getsatisfaction.com/schillmania/products/schillmania_soundmanager_2" title="discussion/support for SoundManager 2 on Get Satisfaction">discussion/support</a></li>
			</ul>
			
		<h4>As Heard On <span class="scratched-out">TV</span> The Internets</h4>
		<p class="tight compact">A few nifty places SoundManager 2 has been seen in use on the Wild World Web:</p>
		<div class="inthewild">
		 <a id="soundcloud" href="http://thecloudplayer.com/" title="Soundcloud / The Cloud Player"><span>SoundCloud / The Cloud Player</span></a>
		 <a href="http://8tracks.com/" title="8tracks" style="background:#fff"><img src="demo/_image/8tracks-logo.png" alt="8tracks logo" /></a>
		 <a id="lastfm" href="http://www.last.fm/" title="last.fm"><span>last.fm</span></a>
		 <a id="opera" href="http://www.opera.com/" title="Opera Software ASA (Media Player component)"><span>Opera Software ASA</span></a>
		 <a id="discogs" href="http://www.discogs.com/" title="Discogs"><img src="demo/_image/discogs.gif" alt="Discogs logo" /></a>
		 <a id="mixcrate" href="http://www.mixcrate.com/" title="Mixcrate"><span>Mixcrate</span></a>
		</div>

		<h4>Download!</h4>
		<p style="margin-top:1.5em"><a href="doc/download/" class="feature">Get SoundManager 2</a></p>

	</div>

	<div class="clear">&nbsp;</div>
	
	<div class="columnar">

	 <div class="c1">
		 <h2>Playing MP3s with JavaScript</h2>
		 <p>Play audio in one line, or get fancy with multiple options.</p>
	 </div>

	 <div class="c2">
		 <h3>How To Play Audio Using SoundManager 2</h3>
		 <p>Simple ID / URL method:</p>
		 <code>soundManager.play('<span>mySound</span>','<span>/path/to/an.mp3</span>');</code>
		 <p>And, setting the volume:</p>
		 <code>soundManager.setVolume('<span>mySound</span>',<span>50</span>);</code>
		 <p>More flexible method supporting option parameters as an object literal:</p>
<pre class="block"><code>var mySound = soundManager.createSound({
  id: '<span>someSound</span>',
  url: '<span>/path/to/some.mp3</span>',
  volume: <span>50</span>,
  onload: <span>soundLoadedFunction</span>
});
mySound.play();</code></pre>
		 <p><a href="demo/api/">See API Demos</a></p>
	 </div>
	
	 </div>
	
	 <div class="columnar">
	
	 <div class="c1">
	 	<h2>Using SM2 on your site</h2>
		<p>How to include SoundManager 2 from HTML, and some basic event handlers.</p>
	 </div>
	
	 <div class="c2">
		<p>Include the SoundManager 2 core script, tell it where to look for the flash .SWF and provide an onload() handler.</p>
<pre class="block"><code>&lt;script type="text/javascript" src="<span>/path/to/soundmanager2.js</span>"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
soundManager.url = '<span>/path/to/swfs/</span>';
soundManager.onload = function() {
  <span>// SM2 is ready to go!</span>&nbsp;
  <span>// soundManager.createSound(...) calls can now be made, etc.</span>
}
&lt;/script&gt;</code></pre>

	 <p><a href="demo/template/">See a basic template demo</a></p>

	 </div>
	
	</div>

	<div id="licensing" class="columnar">	

	 <div class="c1">
	 	<h2>Licensing</h2>
		<p>BSD licensed.</p>
	 </div>
	
	 <div class="c2">
		<p>SoundManager 2 is provided under a <a href="license.txt" title="SoundManager 2 BSD license" class="norewrite">BSD license</a>.</p>
	 </div>

	</div>

    <!-- columnar -->
	</div>
	
	<div class="clear"></div>

  <div id="col3" class="c3">

  <div id="get-satisfaction" class="box">
   <div id="gsfn_list_widget">
    <h2><a href="http://getsatisfaction.com/schillmania/products/schillmania_soundmanager_2/" title="User discussion, FAQs and support for SoundManager 2" rel="nofollow">Discussion / Support</a><span class="l"></span><span class="r"></span></h2>
    <div id="gsfn_content"></div>
    <div class="powered_by"><a href="http://getsatisfaction.com/">Get Satisfaction support network</a></div>
   </div>
  <!-- /.box -->

  </div>


 <!-- /main -->
 </div>

 <!-- /content -->
 </div>

 <div id="control-template">
  <!-- control markup inserted dynamically after each link -->
  <div class="controls">
   <div class="statusbar">
    <div class="loading"></div>
     <div class="position"></div>
   </div>
  </div>
  <div class="timing">
   <div id="sm2_timing" class="timing-data">
    <span class="sm2_position">%s1</span> / <span class="sm2_total">%s2</span></div>
  </div>
  <div class="peak">
   <div class="peak-box"><span class="l"></span><span class="r"></span>
   </div>
  </div>
 </div>

 <div id="spectrum-container" class="spectrum-container">
  <div class="spectrum-box">
   <div class="spectrum"></div>
  </div>
 </div>

<script type="text/javascript">
init();
</script>

</div>
	
</body>

</html>
